@mixin scrollable() {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@mixin flexbox() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-wrap-single() {
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

@mixin flex-wrap-multiple() {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@mixin flex-wrap($fw) {
  -webkit-flex-wrap: $fw;
  -ms-flex-wrap: $fw;
  flex-wrap: $fw;
}

@mixin flex-shrink($fs) {
  -webkit-flex-shrink: $fs;
  -ms-flex: 0 $fs auto;
  flex-shrink: $fs;
}

@mixin justify-content-start() {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

@mixin justify-content-end() {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

@mixin justify-content-space-between() {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

@mixin justify-content($jc) {
  -webkit-box-pack: $jc;
  -ms-flex-pack: $jc;
  -webkit-justify-content: $jc;
  justify-content: $jc;
}

@mixin align-items-start() {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

@mixin align-items-end() {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

@mixin align-items($ai) {
  -webkit-box-align: $ai;
  -ms-flex-align: $ai;
  -webkit-align-items: $ai;
  align-items: $ai;
}

@mixin align-content($ai) {
  -ms-flex-line-pack: $ai;
  -webkit-align-content: $ai;
  align-content: $ai;
}

@mixin align-self($as) {
  -ms-flex-item-align: $as;
  -webkit-align-self: $as;
  align-self: $as;
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin hairline-top($color) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: $color;
    display: block;
    z-index: 15;
    transform-origin: 50% 0%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

@mixin hairline-left($color) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    width: 1px;
    height: 100%;
    background-color: $color;
    display: block;
    z-index: 15;
    transform-origin: 0% 50%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

@mixin hairline-bottom($color) {
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: $color;
    display: block;
    z-index: 15;
    transform-origin: 50% 100%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }

}

@mixin hairline-right($color) {
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: $color;
    display: block;
    z-index: 15;
    transform-origin: 100% 50%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

// For right and bottom
@mixin hairline-remove-right() {
  &:after {
    display: none;
  }
}

@mixin hairline-remove-bottom() {
  &:after {
    display: none;
  }
}

// For left and top
@mixin hairline-remove-left() {
  &:before {
    display: none;
  }
}

@mixin hairline-remove-top() {
  &:before {
    display: none;
  }
}

// For right and bottom
@mixin hairline-color-right() {
  &:after {
    background-color: $color;
  }
}

@mixin hairline-color-bottom() {
  &:after {
    background-color: $color;
  }
}

// For left and top
@mixin hairline-color-left() {
  &:before {
    background-color: $color;
  }
}

@mixin hairline-color-top() {
  &:before {
    background-color: $color;
  }
}

@mixin hairline-single($color, $offset) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www@mixin w3@mixin org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0@mixin 5'/></svg>");
  background-position: $offset 100%;
}

@mixin hairline-double($color, $offset) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www@mixin w3@mixin org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0@mixin 5'/></svg>"),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www@mixin w3@mixin org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0@mixin 5'/></svg>");
  background-position: $offset 100%, $offset 0;
  background-repeat: no-repeat;
}
